<template>
	<view class="bg_color list">
		<!-- 头像 -->
		<view class="headPortrait CellBorder" @click="getImage">
			<view class="text">头像</view>
			<view class="right">
				<image :src="tailorPath" mode="" style="border-radius: 50%"></image>
				<image :src="config.getImage('iconRight')" style="width: 32rpx; height: 32rpx" mode=""></image>
			</view>
		</view>
		<lv-clip ref="lvClipDom" @createImg="createImg"></lv-clip>
		<!-- 姓名 -->
		<view class="Cell" @click="goModifyName">
			<view class="text">姓名</view>
			<view class="right">
				<view style="margin-right: 16rpx">{{ userStore.users.username }}</view>
				<image :src="config.getImage('iconRight')" style="width: 32rpx; height: 32rpx" mode=""></image>
			</view>
		</view>
		<!-- 用户绑定协议 -->
		<view class="Cell CellBorder" style="margin-top: 36rpx" @click="goAgreement">
			<view class="text">用户绑定协议</view>
			<view class="right">
				<image :src="config.getImage('iconRight')" style="width: 32rpx; height: 32rpx" mode=""></image>
			</view>
		</view>
		<!-- 隐私声明 -->
		<view class="Cell" @click="goPrivacy">
			<view class="text">隐私声明</view>
			<view class="right">
				<image :src="config.getImage('iconRight')" style="width: 32rpx; height: 32rpx" mode=""></image>
			</view>
		</view>
		<!-- 退出登录 -->
		<button class="signoutLogin" @click="signoutLogin">退出登录</button>
	</view>
</template>

<script setup>
import config from '@/config.js';
import lvClip from './lvClip.vue';
import { usersStore } from 'store/users.js';
import Api from 'api';
const api = new Api
const userStore = usersStore();
const tailorPath = computed(() => userStore.users.avatarUrl);
const signoutLogin = () => {
	userStore.clearUsers();
	uni.navigateBack({
		delta: 1
	});
};
const goModifyName = () => {
	uni.navigateTo({
		url: '/pages/modifyName/modifyName?name=' + userStore.users.username
	});
};
const goAgreement = () => {
	uni.navigateTo({
		url: '/pages/agreement/agreement'
	});
};
const goPrivacy = () => {
	uni.navigateTo({
		url: '/pages/privacy/privacy'
	});
};
const lvClipDom = ref(null);
// let tailorPath = ref(userStore.users.avatarUrl ||'../../static/images/setting/iconDefault.png')
const getImage = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		success: (res) => {
			if (res.tempFilePaths[0]) {
				// 传入临时路径
				lvClipDom.value.show(res.tempFilePaths[0]);
			}
		}
	});
};
const createImg = (e) => {
	uni.uploadFile({
		url: `${config.interface}/jeecg-boot/app/upload/uploadFile?bizPath=user&customBucket=applet&name=${e}`,
		filePath: e,
		name: 'file',
		header: {
			'top-token': userStore.users.token
		},
		success: async (res) => {
			uni.hideLoading();
			const obj = JSON.parse(res.data);
			const result = await api.setting({ avatarUrl: obj.result.url, id: userStore.users.id });
			userStore.users.avatarUrl = obj.result.url;
		},
		fail: (err) => {
			console.log(err);
			uni.hideLoading();
		}
	});
};
</script>

<style scoped lang="scss">
.list {
	padding: 32rpx 0;
	height: 100vh;

	.headPortrait {
		padding: 0 32rpx;
		height: 192rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.text {
			color: #909090;
			font-weight: 400;
			font-style: normal;
		}

		.right {
			display: flex;
			align-items: center;
		}

		image {
			width: 128rpx;
			margin-right: 16rpx;
			height: 128rpx;
		}
	}

	.Cell {
		padding: 0 32rpx;
		height: 96rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.text {
			color: #909090;
			font-weight: 400;
			font-style: normal;
		}

		.right {
			display: flex;
			align-items: center;
		}

		image {
			width: 128rpx;
			// margin-right: 16rpx;
			height: 128rpx;
		}
	}

	.CellBorder {
		border-bottom: 1rpx solid #efefef;
	}

	.signoutLogin {
		width: 686rpx;
		height: 96rpx;
		color: #ff4646;
		position: absolute;
		/* 固定定位 */
		bottom: 32rpx;
		/* 底部对齐 */
		left: 50%;
		/* 水平居中 */
		transform: translateX(-50%);
		/* 向左移动自身宽度的50%来居中对齐 */
		text-align: center;
		/* 文本居中 */
		border-radius: 16rpx;
		line-height: 96rpx;
		font-size: 32rpx;
	}

	button::after {
		border: none;
	}
}
</style>
